<template>
  <div class="login-box">
    <nav-bar title="充值" />
    <div class="content">
      <div class="form">
        <j-input type="text" class="tp-input" v-model="rechargeAmount" label="充值金额" max="11" placeholder="请输入充值金额" />
      </div>
      <div class="infos">单次充值金额不能低于{{minRechargeAmount}}元</div>
      <div class="payInfo">
        <template v-for="(item,index) in payInfo">
          <div class="pay" :key="index" :class="{'bd-b': index < 2}" @click="changePay(item.id)">
            <div class="iconName">
              <van-icon :name="item.type" :class="'icon ' + item.type" />{{item.name}}
            </div>
            <van-icon name="checked" class="active" v-if="rechargeType === item.id" />
          </div>
        </template>
      </div>
      <j-botton type="danger" class="loginBtn" @click.native="rechargeFirst" style="margin-top:.78rem;">确认充值</j-botton>
      <div class="topup-info">
        <div class="name">充值说明</div>
        <p>1、确认充值金额后，平台会推送收款信息给用户，用户需线下将充值金额转账给平台推送的账户，并上传转账截图，平台确认收款后，充值金额会自动充值到用户账户；</p>
        <p>2、平台需扣除200元作为激活账户费用；</p>
        <p>3、1元 = 1ORG；</p>
        <p>4、充值成功后，不支持提现；</p>
        <p>5、使用方法：此充值的金额在本平台用于抢单使用。</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'topup',
  data() {
    return {
      rechargeType: 3,
      rechargeAmount: '',
      minRechargeAmount: null,
      maxRechargeAmount: null,
      activeAmount: null || '200',
      status: null,
      payInfo: [
        //   {
        //   id: 1,
        //   type: 'wechat',
        //   name: '微信'
        // }, {
        //   id: 2,
        //   type: 'alipay',
        //   name: '支付宝'
        // },
        {
          id: 3,
          type: 'card',
          name: '银行卡'
        }
      ]
    };
  },
  created() {
    this.rechargeRirst();
  },
  mounted() {},
  methods: {
    changePay(id) {
      this.rechargeType = id;
    },
    rechargeRirst() {
      this.$API.user.rechargeRirst({}).then(res => {
        if (!res.code) {
          this.minRechargeAmount = res.data.minRechargeAmount;
          this.maxRechargeAmount = res.data.maxRechargeAmount;
          this.status = res.data.status;
          this.activeAmount = res.data.activeAmount || '200';
        }
      });
    },
    // 充值第一步
    rechargeFirst() {
      if (!this.rechargeAmount) {
        this.$toast('请输入充值金额!');
        return;
      }
      if (this.rechargeAmount < this.minRechargeAmount) {
        this.$toast('充值金额不能小于' + this.minRechargeAmount + '!');
        return;
      }
      if (this.rechargeAmount > this.maxRechargeAmount) {
        this.$toast('充值金额不能大于' + this.maxRechargeAmount + '!');
        return;
      }
      // if (this.rechargeAmount >= this.minRechargeAmount && this.rechargeAmount <= 20000) {
      //   this.$toast('充值金额不能小于' + this.minRechargeAmount + '!');
      //   return;
      // }
      if (!this.status) {
        this.$dialog.confirm({
          message: '账户未激活，将扣除' + this.activeAmount + '元作为账户激活费用',
          width: '280px',
          showCancelButton: false,
          confirmButtonText: '我知道了',
          confirmButtonColor: '#292929'
        }).then((res) => {
          this._rechargeFirst();
        });
        return;
      }
      this._rechargeFirst();
    },
    _rechargeFirst() {
      const options = {
        amount: this.rechargeAmount,
        type: this.rechargeType
      };
      this.$API.user.rechargeFirst(options).then(res => {
        if (!res.code) {
          sessionStorage.setItem('payInfo', JSON.stringify(res.data));
          this.$store.dispatch('setSettingInfo');
          this.$router.push({
            path: '/topup/upload',
            query: {
              rechargeNo: res.data.rechargeNo,
              amount: this.rechargeAmount,
              redirectURL: this.$route.query.redirectURL
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .topup-info {
    padding: 32px;
    line-height: 56px;
    color: #999;

    .name {
      padding-bottom: 10px;
    }
  }

  .tp-input {
    .j-input {
      border: 1px solid #eee;
      /*no*/
    }
  }

  .infos {
    border-top: 1px solid #eee;
    color: #E31D1A;
    font-size: 24px;
    padding: 20px 0 20px 220px;
    background-color: #fff;
  }

  .payInfo {
    margin-top: 20px;
    padding: 5px 0;
    background-color: #fff;

    .pay {
      padding: 25px 30px;
      display: flex;
      justify-content: space-between;

      .icon {
        vertical-align: middle;
        position: relative;
        top: -2px;
        margin-right: 10px;
      }

      .iconName {
        font-size: 26px;
      }

      .icon.wechat {
        color: #56b43f;
      }

      .icon.alipay {
        color: #4495d5;
      }

      .icon.card {
        color: #ddcaa9;
      }

      .active {
        color: #E31D1A;
        font-size: 40px;
        margin-top: 6px;
      }
    }
  }
</style>
